<script lang="ts" setup>
import pageHeader from "@/components/pageHeader.vue";
import { onMounted, ref } from "vue";
import moment from "moment";
import { useRoute } from "vue-router";
import { copy } from "@/utils/copy";
const route = useRoute();
const detail = ref(null);

const formatAddress = (addr: string) => {
  if (!addr || addr == "") return "--";
  return (
    addr.substring(0, 10) +
    "..." +
    addr.substring(addr.length - 10, addr.length)
  );
};

onMounted(() => {
  if (route.query.data) {
    console.log("111", JSON.parse(route.query.data));
    detail.value = JSON.parse(route.query.data);
  }
});
</script>

<template>
  <div class="page">
    <mHeader :lineShow="true" />
    <pageHeader>
      <template #title>{{ $t("WithdrawT11") }}</template>
    </pageHeader>
    <div class="content">
      <div class="cellWrap">
        <div class="vCell bb">
          {{ $t("WithdrawT20") }}
          <div style="flex: 1" />
          {{ detail && detail.order_no }}
        </div>
        <div class="vCell bb">
          {{ $t("RechargeT9") }}
          <div style="flex: 1" />
          BNB Chain
        </div>
        <div class="vCell bb">
          {{ $t("WithdrawT4") }}
          <div style="flex: 1" />
          {{ detail && detail.quote_amount }} USDT
        </div>
        <div class="vCell bb">
          {{ $t("WithdrawT3") }}
          <div style="flex: 1" />
          {{ detail && formatAddress(detail.wallet) }}
          <img
            @click="copy(detail && detail.wallet)"
            src="@/assets/images/copy.svg"
            class="icon"
          />
        </div>
        <div class="vCell bb" @click="navTo('/kf')">
          {{ $t("RechargeT11") }}
          <div style="flex: 1" />
          {{
            moment(detail && detail.created_at).format("YYYY-MM-DD HH:mm:ss")
          }}
        </div>
        <div class="vCell bb">
          {{ $t("RechargeT12") }}
          <div style="flex: 1" />
          {{ detail && formatAddress(detail.tx_hash) }}
          <img
            @click="copy(detail && detail.tx_hash)"
            src="@/assets/images/copy.svg"
            class="icon"
          />
        </div>
        <div v-if="detail" class="vCell bb" @click="navTo('/kf')">
          {{ $t("WithdrawT19") }}
          <div style="flex: 1" />
          {{
            detail.state == -1
              ? $t("WithdrawT14")
              : detail.state == 9
              ? $t("WithdrawT15")
              : detail.state == 0 || detail.state == 7 || detail.state == 8
              ? $t("WithdrawT16")
              : detail.state == 1
              ? $t("WithdrawT17")
              : $t("WithdrawT18")
          }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "@/assets/style/constant.scss";
.page {
  width: 100%;
  min-height: 100vh;
  background-color: #1a2c38;
  .content {
    padding: 96 * $_ru 20 * $_ru 20 * $_ru 20 * $_ru;
    .cellWrap {
      margin-top: 20 * $_ru;
      border-radius: 6px;
      overflow: hidden;
      border: 2 * $_ru solid #0f212e;
      .bb {
        border-bottom: 1 * $_ru solid #383f43;
      }
      .vCell {
        display: flex;
        align-items: center;
        margin: 0 30 * $_ru;
        padding: 30 * $_ru 0;
        font-size: 26 * $_ru;
        color: #fff;
        .icon {
          width: 40 * $_ru;
          height: 40 * $_ru;
          margin-left: 5 * $_ru;
        }
      }
    }
  }
}
</style>